{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>图书添加</title>
    <link href="{% static 'css_js/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/index.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
</head>
<body style="margin-top:20px;background-color: #e2f7d7;">
<div class="container">
    {% include 'header.html' %}
    <div class="col-md-12 wow fadeInLeft">
        <ul class="breadcrumb">
            <li><a href="{% url 'Index:index' %}">首页</a></li>
            <li><a href="{% url 'Book:frontList' %}">添加图书</a></li>
            <li class="active">添加图书</li>
        </ul>
        <div class="row">
            <div class="col-md-10">
                <form class="form-horizontal" name="bookAddForm" id="bookAddForm" enctype="multipart/form-data"
                      method="post" class="mar_t15">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="book_barcode" class="col-md-2 text-right">图书条形码:</label>
                        <div class="col-md-8">
                            <input type="text" id="book_barcode" name="book.barcode" class="form-control"
                                   placeholder="请输入图书条形码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_bookName" class="col-md-2 text-right">图书名称:</label>
                        <div class="col-md-8">
                            <input type="text" id="book_bookName" name="book.bookName" class="form-control"
                                   placeholder="请输入图书名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_bookTypeObj_bookTypeId" class="col-md-2 text-right">图书所在类别:</label>
                        <div class="col-md-8">
                            <select id="book_bookTypeObj_bookTypeId" name="book.bookTypeObj.bookTypeId"
                                    class="form-control">
                                {% for bookType in bookTypes %}
                                    <option value="{{ bookType.bookTypeId }}">{{ bookType.bookTypeName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_price" class="col-md-2 text-right">图书价格:</label>
                        <div class="col-md-8">
                            <input type="text" id="book_price" name="book.price" class="form-control"
                                   placeholder="请输入图书价格">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_count" class="col-md-2 text-right">库存:</label>
                        <div class="col-md-8">
                            <input type="text" id="book_count" name="book.count" class="form-control"
                                   placeholder="请输入库存">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_publishDateDiv" class="col-md-2 text-right">出版日期:</label>
                        <div class="col-md-8">
                            <div id="book_publishDateDiv" class="input-group date book_publishDate col-md-12"
                                 data-link-field="book_publishDate" data-link-format="yyyy-mm-dd">
                                <input class="form-control" id="book_publishDate" name="book.publishDate" size="16"
                                       type="text" value="" placeholder="请选择出版日期" readonly>
                                <span class="input-group-addon">
							                    <span class="glyphicon glyphicon-calendar"></span>
							                </span>
                                <span class="input-group-addon" style="color:#F00">*</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_publish" class="col-md-2 text-right">出版社:</label>
                        <div class="col-md-8">
                            <input type="text" id="book_publish" name="book.publish" class="form-control"
                                   placeholder="请输入出版社">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_bookPhoto" class="col-md-2 text-right">图书图片:</label>
                        <div class="col-md-8">
                            <img class="img-responsive" id="book_bookPhotoImg" border="0px"/><br/>
                            <input id="bookPhoto" name="book.bookPhoto" type="file" size="50"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_bookDesc" class="col-md-2 text-right">图书简介:</label>
                        <div class="col-md-8">
                            <textarea name="book.bookDesc" id="book_bookDesc"
                                      style="width:100%;height:300px;"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="book_bookFile" class="col-md-2 text-right">图书文件:</label>
                        <div class="col-md-8">
                            <a id="book_bookFileImg" border="0px"></a><br/>
                            <input id="bookFile" name="book.bookFile" type="file" size="50"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <span class="col-md-2"></span>
                        <span onclick="ajaxBookAdd();" class="btn btn-primary bottom5 top5">添加</span>
                    </div>
                    <style>#bookAddForm .form-group {
                        margin: 5px;
                    }  </style>
                </form>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>
<div style="background-color: #e2f7d7;">
    {% include 'footer.html' %}
</div>
<script src="{% static 'css_js/js/jquery.min.js' %}"></script>
<script src="{% static 'css_js/js/bootstrap.js' %}"></script>
<script src="{% static 'css_js/js/wow.min.js' %}"></script>
<script type="text/javascript" src="{% static 'css_js/js/bootstrap-datetimepicker.min.js' %}" charset="UTF-8"></script>
<script type="text/javascript" src="{% static 'css_js/js/bootstrap-datetimepicker.zh-CN.js' %}"
        charset="UTF-8"></script>
<script src="{% static 'css_js/js/bootstrapValidator.min.js' %}"></script>
<script src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
<script src="{% static 'css_js/js/jsdate.js' %}"></script>
<script>
    //实例化图书描述编辑器
    tinyMCE.init({
        selector: "#book_bookDesc",
        theme: 'advanced',
        language: "zh",
        strict_loading_mode: 1,
    });

    //提交添加图书信息
    function ajaxBookAdd() {
        $("#book_bookDesc").text(tinyMCE.editors['book_bookDesc'].getContent());
        //提交之前先验证表单
        $("#bookAddForm").data('bootstrapValidator').validate();
        if (!$("#bookAddForm").data('bootstrapValidator').isValid()) {
            return;
        }
        jQuery.ajax({
            type: "post",
            url: "{% url 'Book:frontAdd' %}",
            dataType: "json",
            data: new FormData($("#bookAddForm")[0]),
            success: function (obj) {
                if (obj.success) {
                    alert("保存成功！");
                    location.reload()
                } else {
                    alert(obj.message);
                }
            },
            processData: false,
            contentType: false,
        });
    }

    $(function () {
        /*小屏幕导航点击关闭菜单*/
        $('.navbar-collapse a').click(function () {
            $('.navbar-collapse').collapse('hide');
        });
        new WOW().init();
        //验证图书添加表单字段
        $('#bookAddForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                "book.barcode": {
                    validators: {
                        notEmpty: {
                            message: "图书条形码不能为空",
                        }
                    }
                },
                "book.bookName": {
                    validators: {
                        notEmpty: {
                            message: "图书名称不能为空",
                        }
                    }
                },
                "book.price": {
                    validators: {
                        notEmpty: {
                            message: "图书价格不能为空",
                        },
                        numeric: {
                            message: "图书价格不正确"
                        }
                    }
                },
                "book.count": {
                    validators: {
                        notEmpty: {
                            message: "库存不能为空",
                        },
                        integer: {
                            message: "库存不正确"
                        }
                    }
                },
                "book.publishDate": {
                    validators: {
                        notEmpty: {
                            message: "出版日期不能为空",
                        }
                    }
                },
            }
        });

        $('#book_publishDateDiv').datetimepicker({
            language: 'zh-CN',  //显示语言
            format: 'yyyy-mm-dd',
            minView: 1,
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            minuteStep: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0
        }).on('hide', function (e) {
            //下面这行代码解决日期组件改变日期后不验证的问题
            $('#bookAddForm').data('bootstrapValidator').updateStatus('book.publishDate', 'NOT_VALIDATED', null).validateField('book.publishDate');
        });
    })

</script>
</body>
</html>
